<template>
  <div>
    <el-dialog top="24vh"
               append-to-body
               :width="width"
               :visible.sync="pictureShow"
               :close-on-click-modal="false">
      <div slot="title">完成拼图验证</div>
      <!-- style="z-index:9999;    position: relative;" -->
      <div class="authen-show"
           v-if="pictureShow">
        <authentication :on-success="success"
                        @fatherMethod="pictureShow = false"
                        :on-syntony="picture"
                        width="260"
                        height="120"
                        pl-size="30"
                        deviation="5"
                        :puzzle-img-list="imgLists"
                        class="auth-entication-style"></authentication>
      </div>
    </el-dialog>
    <el-dialog :title="title"
               append-to-body
               class="dialog-box"
               :before-close="handleClose"
               :visible.sync="visible"
               :width="width"
               top="24vh">
      <el-form :model="ruleForm"
               ref="ruleForm"
               label-width="100px"
               class="demo-ruleForm">
        <el-form-item label="手机号"
                      prop="phoneNum"
                      :rules="[
            { required: true, message: '手机号不能为空' },
            {
              pattern: /^[1][3,4,5,6,7,8,9][0-9]{9}$/,
              message: '请输入正确的手机号码格式'
            }
          ]">
          <!-- { type: 'mobile', message: '手机号必须是11到13位数字', trigger: 'change' }, -->
          <el-input v-model="ruleForm.phoneNum"></el-input>
        </el-form-item>
        <br />
        <el-form-item label="手机验证码"
                      prop="phoneCode"
                      label-width="100px"
                      :rules="[{ required: true, message: '验证码不能为空' }]">
          <div class="item-flex">
            <el-input v-model="ruleForm.phoneCode"
                      class="verificationSty" />
            <div style="
                height: 20px;
                border-left: 1px solid var(--prev-border-color-grey);
                margin-top: 8px;
              " />
            <el-button v-if="isShowMsgCode"
                       :disabled="!ruleForm.phoneNum"
                       style="color: var(--prev-color-primary); font-size: 14px; border: 0px"
                       @click="handleSend">发送验证码</el-button>
            <el-button v-if="!isShowMsgCode"
                       style="color: var(--prev-color-primary); font-size: 14px; border: 0px"
                       disabled>{{ showTime }}秒后重新发送</el-button>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button type="default"
                   @click="handleClose">取消</el-button>
        <el-button type="primary"
                   @click="container()">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { user } from "@/api/index";
import { ValidateRules } from "@/libs/util";
import Authentication from "@/views/enroll/Authentication.vue";
import authentication from "@/libs/authentication";
export default {
  name: "MobileBind",
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    width: {
      type: String,
      default: "440px"
    },
    title: {
      type: String
    }
  },
  mixins: [authentication],
  components: { Authentication },
  data () {
    return {
      isShowMsgCode: true,
      ruleForm: {
        phoneNum: "",
        phoneCode: ""
      },
      rules: {
        phoneNum: [ValidateRules.required],
        phoneCode: [ValidateRules.required]
      }
    };
  },
  methods: {
    async submit () {
      let { code, message } = await user.bindMobile(this.ruleForm);

      this.$message[code === 0 ? "success" : "error"](message);
      if (code === 0) {
        this.handleClose();
        this.$emit("bindMobile");
      }
    },
    handleClose () {
      this.$emit("update:visible", false);
    },
    container () {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.submit();
        }
      });
    },
    async loginCodeSend (ruleForm) {
      let { phoneNum, verify, requestId } = ruleForm;
      let postData = {
        phoneNum: phoneNum,
        requestId: requestId,
        verify: verify
      };
      let { code, message } = await user.mobileCode(postData);
      this.$message[code === 0 ? "success" : "error"](message);
    }
  }
};
</script>

<style lang="scss" scoped>
.dialog-box >>> .el-dialog__body {
  max-height: 460px !important;
  overflow: auto !important;
}
.el-form {
  .el-input {
    width: 300px;
    margin-right: 10px;
  }
}
.item-flex {
  display: flex;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  width: 300px;
}
.verificationSty {
  /deep/ .el-input__inner {
    border: 0px;
  }
}
</style>
